<template>
  <div>
    <div class="top-panel">
      <el-form :model="searchFormData"
               label-width="50px">
        <el-row>
          <el-col :span="4">
            <el-form-item label="标题"
                          prop="titleFuzzy">
              <el-input placeholder="请输入名称"
                        v-model="searchFormData.titleFuzzy"
                        clearable
                        @keyup.enter.native="loadDataList">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态"
                          prop="status">
              <el-select v-model="searchFormData.status"
                         clearable
                         placeholder="请选择状态"
                         :style="{width:'100%'}">
                <el-option :value="0"
                           label="草稿"></el-option>
                <el-option :value="1"
                           label="已发布"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="分类"
                          prop="categoryId">
              <el-select v-model="searchFormData.categoryId"
                         clearable
                         placeholder="请选择分类"
                         :style="{width:'100%'}">
                <el-option :value="item.categoryId"
                           :label="item.categoryName"
                           v-for="item in categoryList"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  :style="{'padding-left':'10px'}">
            <el-button type="danger"
                       @click="loadDataList">搜索</el-button>
            <el-button type="danger"
                       @click="showEdit('add')">新增博客</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <Table :columns="columns"
           :showPagination="true"
           :dataSource="tableData"
           :fetch="loadDataList"
           :options="tableOptions">
      <!--封面-->
      <template #cover="{index,row}">
        <Cover :cover="row.cover"></Cover>
      </template>
      <!--文章信息-->
      <template #blogInfo="{index,row}">
        <div>标题：{{row.title}}</div>
        <div>分类：{{row.categoryName}}</div>
        <div>作者：{{row.nickName}}</div>
      </template>
      <!--类型-->
      <template #typeName="{index,row}">
        <div>类型：<span v-if="row.type==0">原创</span><span v-if="row.type==1">转载</span></div>
        <div v-if="row.type==1">转载地址：{{row.reprintUrl}}</div>
      </template>

      <!--类型-->
      <template #statusName="{index,row}">
        <span v-if="row.status==1"
              :style="{color:'green'}">{{row.statusName}}</span>
        <span v-else
              :style="{color:'red'}">{{row.statusName}}</span>
      </template>
      <!--类型-->
      <template #time="{index,row}">
        <div>创建时间：{{row.createTime}}</div>
        <div>更新时间：{{row.lastUpdateTime}}</div>
      </template>
      <template #op="{index,row}">
        <div class="op">
          <a href="javascript:void(0)"
             class="a-link"
             @click="showEdit('update',row)"
             v-if="userInfo.userId==row.userId">修改</a>
          <span v-else>--</span>
          <el-divider direction="vertical" />
          <a href="javascript:void(0)"
             class="a-link"
             @click="delBlog(row)"
             v-if="userInfo.userId==row.userId">删除</a>
          <span v-else>--</span>
          <el-divider direction="vertical" />
          <a href="javascript:void(0)"
             class="a-link"
             @click="showDetail(row.blogId)">预览</a>
        </div>
      </template>
    </Table>
    <BlogEdit ref="blogEditRef"
              @callback="loadDataList"></BlogEdit>

    <BlogDetail ref="blogDetailRef"></BlogDetail>
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import BlogEdit from "./BlogEdit.vue"
import BlogDetail from "./BlogDetail.vue"
const { proxy } = getCurrentInstance();

const userInfo = ref(proxy.VueCookies.get("userInfo") || {});

const api = {
  loadCategory: "/category/loadAllCategory4Blog",
  loadDataList: "/blog/loadBlog",
  delBlog: "/blog/recoveryBlog"
}

//搜索
const searchFormData = reactive({})
const categoryList = ref([]);
const loadCategoryList = async () => {
  let result = await proxy.Request({
    url: api.loadCategory
  })
  categoryList.value = result.data;
}
loadCategoryList();

//列表
const columns = [{
  label: "封面",
  prop: "cover",
  width: 80,
  scopedSlots: "cover",
}, {
  label: "文章信息",
  prop: "blogInfo",
  scopedSlots: "blogInfo",
}, {
  label: "编辑器",
  prop: "editorTypeName",
  width: 100,
}, {
  label: "类型",
  prop: "typeName",
  width: 200,
  scopedSlots: "typeName",
}, {
  label: "评论",
  prop: "allowCommentTypeName",
  width: 100,
}, {
  label: "状态",
  prop: "status",
  width: 100,
  scopedSlots: "statusName",
}, {
  label: "时间",
  prop: "time",
  width: 300,
  scopedSlots: "time",
}, {
  label: "操作",
  prop: "op",
  width: 200,
  scopedSlots: "op",
}]

const tableData = ref({})
const tableOptions = {
  extHeight: 50,
}

const loadDataList = async () => {
  let params = {
    pageNo: tableData.value.pageNo,
    pageSize: tableData.value.pageSize,
  }

  Object.assign(params, searchFormData);
  let result = await proxy.Request({
    url: api.loadDataList,
    params
  })
  if (!result) {
    return
  }
  tableData.value = result.data;
}

const blogEditRef = ref(null);
const showEdit = (type, data) => {
  blogEditRef.value.init(type, data);
}

//删除博客
const delBlog = (data) => {
  proxy.Confirm(`你确定要删除【${data.title}】`, async () => {
    let result = await proxy.Request({
      url: api.delBlog,
      params: {
        blogId: data.blogId,
      }
    })
    if (!result) {
      return;
    }
    loadDataList();
  })
}

//详情
const blogDetailRef = ref(null);
const showDetail = (blogId) => {
  blogDetailRef.value.showDetail(blogId);
}

</script>

<style lang="scss">
</style>